<template>
  <a-modal v-model:visible="visible" :title="props.title" @ok="handleOk">
    <a-transfer v-model:target-keys="targetKeys" :titles="['待通知', '已选择']" :data-source="mockData" show-search :filter-option="filterOption"
      :render="item => item.title" @change="handleChange" @search="handleSearch" />
  </a-modal>
</template>

<script setup name="transfer">
import { onMounted } from 'vue'

const mockData = ref([]);
const targetKeys = ref([]);
const visible = ref(false);

const props = defineProps({
  title:{
		type: String,
		default: '选择',
		required: false
	},
})


onMounted(() => {
  getMock();
});
const getMock = () => {
  const keys = [];
  const mData = [];
  for (let i = 0; i < 20; i++) {
    const data = {
      key: i.toString(),
      title: `content${i + 1}`,
      description: `description of content${i + 1}`,
      chosen: Math.random() * 2 > 1,
    };
    if (data.chosen) {
      keys.push(data.key);
    }
    mData.push(data);
  }
  mockData.value = mData;
  targetKeys.value = keys;
};
const filterOption = (inputValue, option) => {
  return option.description.indexOf(inputValue) > -1;
};
const handleChange = (keys, direction, moveKeys) => {
  console.log(keys, direction, moveKeys);
};
const handleSearch = (dir, value) => {
  console.log('search:', dir, value);
};
const showModal = () => {
  visible.value = true;
};
const handleOk = e => {
  console.log(e);
  visible.value = false;
};
defineExpose({
  showModal
})
</script>
<style lang="less">
.ant-transfer-list-header-title{
  margin-left: 10px;
}
</style>
